<template>
    <div>
        <div class="table_box">
            <tyTable :searchFlag="false"
                     :listApi="$api.listConfInfo"
                     :afterList="afterList"
                     :deleteApi="$api.deleteUser"
                     :delete-flag="false"
                     :columnWidth="120"
                     :openDrawer="openDrawer" ref="tyTable">
                <template v-slot:search="{ param}">

                </template>

                <!--            按钮-->
                <template v-slot:search-operation>
                    <el-form-item>
                        <el-button icon="el-icon-plus" type="primary"
                                   @click="readConf()">读取conf
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-plus" type="primary"
                                   @click="writeConf()">写入conf
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-plus" type="primary" v-loading="loading"
                                   @click="executeNginx($api.checkNginx)">检查nginx
                        </el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button icon="el-icon-plus" type="primary" v-loading="loading"
                                   @click="executeNginx($api.reloadNginx)">重启nginx
                        </el-button>
                    </el-form-item>
                </template>

                <template v-slot:table>
                    <el-table-column type="index" label="序号" align="center" width="52"></el-table-column>
                    <el-table-column prop="name" label="文件" align="center"></el-table-column>
                    <el-table-column prop="path" label="路径" align="center"></el-table-column>
                    <el-table-column prop="text" label="配置" align="center">
                        <template slot-scope="scope">
                            <div class="limit-height">{{scope.row.text}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                </template>

                <template v-slot:extra="{row}">
                    <el-button @click="gotoHttp(row)" type="text" v-if="row.hasHttp"
                               size="small">HTTP
                    </el-button>

                    <el-button @click="gotoServer(row)" type="text" v-if="!row.hasHttp"
                               size="small">SERVER
                    </el-button>
                </template>
            </tyTable>
        </div>

        <tyAddUpdate :model="formData"
                     :add-api="$api.addUser"
                     :update-api="$api.updateConfInfo"
                     :submitBefor="submitBefor"
                     :beforeHandler="beforeHandler"
                     :dialogSize="'60%'"
                     ref="tyAddUpdate"
        >
            <el-form label-position="left" label-width="100px" :model="formData" :rules="rules">
                <el-form-item label="文件:" prop="name">
                    <el-input v-model="formData.name" placeholder=""  clearable disabled
                              maxlength="300"></el-input>
                </el-form-item>
                <el-form-item label="路径:" prop="path">
                    <el-input v-model="formData.path" placeholder=""  clearable disabled
                              maxlength="300"></el-input>
                </el-form-item>
                <el-form-item label="排序:" prop="sort">
                    <el-input v-model="formData.sort" placeholder=""  clearable type="number"
                              maxlength="300"></el-input>
                </el-form-item>

                <el-form-item label="内容">
                    <el-input v-model="formData.text" type="textarea" autosize placeholder=""
                    ></el-input>
                </el-form-item>

            </el-form>
        </tyAddUpdate>

    </div>
</template>

<script>
import {tyAddUpdateMixins, tyConfirmMixins} from "@/mixins/addEditFormMixins";

export default {
    name: "nginxConfig",
    mixins: [tyAddUpdateMixins, tyConfirmMixins],
    data(){
        return{
            formData : {},
            loading:false,
        }
    },
    methods : {
        readConf(){
            this.$api.readConfInfo().then(res=>{
                this.$refs.tyTable.getList()
                this.$message({
                    message: '读取成功',
                    type: 'success'
                });
            })
        },
        executeNginx(api){
            this.loading = true;
            api().then(res=>{
                this.$message(res);
                this.loading = false;
            })
        },
        writeConf(){
            this.$api.writeConfInfo().then(res=>{
                this.$refs.tyTable.getList()
                this.$message({
                    message: '写入成功',
                    type: 'success'
                });
            })
        },
        gotoServer(row){
            this.$router.push({name : 'serverConfig' , query:{confInfoId:row.id }})
        },
        gotoHttp(row){
            this.$router.push({name : 'httpConfig' , query:{confInfoId:row.id , name:row.name}})
        }
    },
    mounted() {
        var compoent = this.$refs.tyAddUpdate
        document.addEventListener("keydown", function(event) {
            if(event.keyCode === 13) {
                compoent.submit()
            }
        });
    }
}

</script>
<style scoped lang="scss">
    .limit-height{
        height:50px;
    }
</style>